<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <!--  -->
      <div>
        <img src="../assets/vue.svg" alt="" class="logo" />
        <span>电商后台管理系统</span>
      </div>
      <el-button type="primary" @click="loginOut">退出登录</el-button>
    </el-header>
    <!-- 内容区域 -->
    <el-container>
      <!-- 菜单栏 -->
      <el-aside :width="isCollapse ? '70px' : '200px'">
        <!-- 侧边栏 -->
        <div id="collapseControl">
          <button @click="isCollapse = !isCollapse">
            <el-icon>
              <d-arrow-left
                style="width: 2em; height: 2em"
                v-show="!isCollapse"
            /></el-icon>
            <el-icon>
              <d-arrow-right
                style="width: 2em; height: 2em"
                v-show="isCollapse"
              />
            </el-icon>
          </button>
        </div>
        <el-menu
          active-text-color="#2f95fb"
          :collapse="isCollapse"
          unique-opened
          :collapse-transition="false"
          :router="true"
          :default-active="$route.path"
        >
          <!-- *一级菜单 -->
          <el-sub-menu
            :index="item.id + ''"
            v-for="item in menuList"
            :key="item.id"
          >
            <template #title>
              <i :class="iconsObj[item.id]"></i>
              <span>{{ item.authName }}</span>
            </template>
            <!-- *二级菜单 -->
            <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
            >
              <el-icon><Grid /></el-icon>
              <span>{{ subItem.authName }}</span></el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符  -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { getCurrentInstance, onBeforeMount, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { DArrowLeft, DArrowRight, Grid } from '@element-plus/icons-vue';
const router = useRouter();

// 退出登录
function loginOut() {
  window.sessionStorage.removeItem('token');
  router.push('/login');
}

// 获取左侧菜单数据 赋值
let menuList = ref(null);
onBeforeMount(async () => {
  const internalInstance = getCurrentInstance();
  const axios = internalInstance.appContext.config.globalProperties.$axios;
  let { data } = await axios.get('menus');
  console.log(data);
  // 如果没有获取到数据，弹框提示用户
  if (data.meta.status !== 200)
    return ElMessage({
      showClose: true,
      message: '获取不到菜单数据',
      type: 'error',
    });
  menuList.value = data.data;
});

let isCollapse = ref(false);

// 定义图标对象
const iconsObj = {
  125: 'iconfont icon-user',
  103: 'iconfont icon-tijikongjian',
  101: 'iconfont icon-shangpin',
  102: 'iconfont icon-danju',
  145: 'iconfont icon-baobiao',
};
</script>

<style scoped>
.el-container {
  height: 100%;
}
.el-header {
  background-color: #14213d;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-header > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-header > div span {
  color: white;
  margin-left: 20px;
  font-size: 1.2rem;
}
.el-header .logo {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
}

.el-header .logo img {
  width: 60%;
  height: auto;
}

.el-aside {
  background-color: #fff;
}

.el-menu {
  box-sizing: border-box;
  border: none;
}
#collapseControl {
  display: flex;
  justify-content: flex-end;
  color: #e5e5e5;
}

#collapseControl button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 18px;
  z-index: 999;
}

.el-main {
  background-color: #e5e5e5;
}

.iconfont {
  margin-right: 8px;
}
</style>
